<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>video 详解</title>
  </head>
<body>
  <!-- 基础用法 -->
  <!-- controlslist：nodownload禁用下载 nofullscreen禁用全屏 -->
  <!-- <video src="./test.mp4" width="400" height="225" controls controlslist="nodownload nofullscreen"></video> -->
  <!-- 贴图 -->
  <!-- poster -->
  <!-- <video src="./test.mp4" width="400" height="225" controls poster="./poster.jpg"></video> -->
  <!-- 自动播放 -->
  <!-- autoplay 在chrome上要配合muted才能自动播放-->
  <!-- <video src="./test.mp4" width="400" height="225" autoplay controls poster="./poster.jpg"></video> -->
  <!-- 静音 -->
  <!-- muted 在移动端非静音的视频是不允许自动播放的-->
  <!-- <video src="./test.mp4" width="400" height="225" muted controls poster="./poster.jpg"></video> -->
  <!-- 循环播放 -->
  <!-- loop -->
  <!-- <video src="./test.mp4" width="400" height="225" muted loop controls poster="./poster.jpg"></video> -->
  <!-- 预加载 -->
  <!-- preload -->
  <!-- <video src="./test.mp4" width="400" height="225" preload controls poster="./poster.jpg"></video> -->
  <!-- 音量控制 -->
  <!-- volume -->
  <!-- <video src="./test.mp4" id="_volume" width="400" height="225" controls poster="./poster.jpg"></video>
  <script type="text/javascript">
    var v = document.getElementById('_volume');
    v.volume = 0.5;
  </script> -->
  <!-- 播放时间控制 -->
  <!-- <video src="./test.mp4" id="_time" width="400" height="225" controls poster="./poster.jpg"></video>
  <script type="text/javascript">
    var v = document.getElementById('_time');
    console.log(v.currentTime);
    v.currentTime = 45;// 单位：秒
  </script> -->
  <!-- 播放地址切换 -->
  <!-- <video src="./test.mp4" id="_src" width="400" height="225" controls poster="./poster.jpg"></video>
  <script type="text/javascript">
    var v = document.getElementById('_src');
    console.log(v.src);
    setTimeout(function () {
      v.src = './test-2.mp4';
    }, 2000);
  </script> -->
  <!-- 备用地址切换 -->
  <!-- <video id="_source" controls width="400" height="225" poster="./poster.jpg">
    <source src="./test3.mp4" type="video/mp4">
    <source src="./test-2.mp4" type="video/mp4">
  </video>
  <script type="text/javascript">
    var v = document.getElementById('_source');
    setTimeout(function () {
      console.log('src', v.currentSrc);// currentSrc是当前的正在播放的地址
    }, 1000);
  </script> -->
  <!-- 事件：视频查找、时长变化、元数据加载、视频下载监听、可播放监听、播放监听、暂停监听、查找开始、查找结束、视频加载等待、视频结束 -->
  <video src="./test.mp4" id="vs" width="400" height="225" controls controlslist="nodownload nofullscreen"></video>
  <script type="text/javascript">
    // 当音频/视频处于加载过程中时，会依次发生以下事件：loadstart-->durationchange-->loadedmetadata-->loadeddata-->progress-->canplay-->canplaythrough
    var v = document.getElementById('vs');
    console.log('v.duration', v.duration); // v.duration NaN
    // loadstart 当浏览器开始寻找指定的音频/视频时，会发生 loadstart 事件。即当加载过程开始时
    v.addEventListener('loadstart', function (e) {
      console.log('loadstart', v.duration);// loadstart NaN
    });
    // durationchange 当指定音频/视频的时长数据发生变化时，发生 durationchange 事件
    v.addEventListener('durationchange', function (e) {
      console.log('durationchange', v.duration);// durationchange 87.978667
    });
    // loadedmetadata 当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件
    v.addEventListener('loadedmetadata', function (e) {
      console.log('loadedmetadata');
    });
    // loadeddata 当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件
    v.addEventListener('loadeddata', function (e) {
      console.log('loadeddata');
    });
    // progress 当浏览器正在下载指定的音频/视频时，会发生 progress 事件
    v.addEventListener('progress', function (e) {
      console.log('progress');
    });
    // canplay 当浏览器能够开始播放指定的音频/视频时，发生 canplay 事件
    v.addEventListener('canplay', function (e) {
      console.log('canplay');
    });
    // canplaythrough 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件
    v.addEventListener('canplaythrough', function (e) {
      console.log('canplaythrough');
    });
    // play 播放
    v.addEventListener('play', function (e) {
      console.log('play');
    });
    // pause 暂停
    v.addEventListener('pause', function (e) {
      console.log('pause');
    });
    // seeking seeking 事件在用户开始移动/跳跃到新的音频/视频（audio/video）播放位置时触发
    v.addEventListener('seeking', function (e) {
      console.log('seeking');
    });
    // seeked seeked 事件在用户已移动/跳跃到音频/视频（audio/video）中的新位置时触发
    v.addEventListener('seeked', function (e) {
      console.log('seeked');
    });
    // waiting waiting 事件在视频由于需要缓冲下一帧而停止时触发
    v.addEventListener('waiting', function (e) {
      console.log('waiting');
    });
    // playing playing 事件在音频/视频(audio/video)因缓冲而暂停或停止后已就绪时触发
    v.addEventListener('playing', function (e) {
      console.log('playing');
    });
    // timeupdate timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发
    v.addEventListener('timeupdate', function (e) {
      console.log('timeupdate');
    });
    // ended ended 事件在音频/视频(audio/video)播放完成后触发
    v.addEventListener('ended', function (e) {
      console.log('ended');
    });
    // error
    v.addEventListener('error', function (e) {
      console.log('error', e);
    });
  </script>
</body>
</html>
